﻿<!DOCTYPE html>
<html>
<head> 
	<title>Particles with Processing.js</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="js/processing.js"></script> 
</head>
<body>
<canvas id="display"></canvas> 

<script  data-processing-target="display" type="application/processing"> 
ArrayList bladeImages = new ArrayList();
totalBlades = 12;
Blade[] blades = new Blade[totalBlades];
float targetX, targetY;
float pointerX, pointerY;
float dx, dy;
int width, height;
  
void setup() {
    width = jQuery(document).width() - 30;
    height = jQuery(document).height() - 30;
    size(width, height);
    noStroke();
    smooth();
    targetX = width / 2;
    targetY = height / 2;
    bladeImages[0] = loadImage("http://media.ch9.ms/coding4fun/processingjs/blade1.png");
	bladeImages[1] = loadImage("http://media.ch9.ms/coding4fun/processingjs/blade2.png");
    for (int i = 0; i < totalBlades; i++) {
       Blade blade = new Blade();
       blade.x = width/2;
       blade.y = height/2;
       blade.index = i;
       blade.rotation = i/2;
       blades[i] = blade;
    }
};
  
void draw() {
    dx += ( targetX - pointerX) * .2; 
    dy += ( targetY - pointerY) * .2;
    dx *= .93;  dy *= .93;
    pointerX += dx;
    pointerY += dy;
    fill(color(16, 46, 16, 10));
    rect(0,0,width, height);
    for ( int i = 0; i < totalBlades; i++)  {
      pushMatrix();
      translate(pointerX, pointerY);
      rotate(blades[i].rotation);
      for ( int c = 0; c < 20; c++)    {
        blades[i].growth = c + .3*(dx+dy);
        blades[i].index++;  
        blades[i].render();
      }
      popMatrix();  
    }
};
  
void pointerMove(TouchEvent e) {
  targetX = e.offsetX;
  targetY = e.offsetY;
};
  
class Blade {
  float x = 0;
  float y = 0;
  float growth = 0.0;
  float rotation = 0.0;
  int index = 0;
  
  void render() {
    scale(0.8, 0.8);
    translate(5*this.growth, 0);
    rotate(this.growth);
    image(bladeImages[this.index%2], this.growth * 5, this.growth);
   }
}

	</script> 
    </body>
</html>